<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>大数据量显示 Demo</title>
		<style type="text/css">
			.panel{
				overflow:scroll;
				width:200px;
				height:80%;
			}
			.panel .scroll{
			}
			.item{
				width:500px;
				height:20px;
			}
			.odd{
				background-color:#ccc;
			}
			.items{
				overflow:hidden;
				position:absolute;
			}
			.red{
				color:red;
			}
			.green{
				color:green;
			}
		</style>
	</head>
	<body>
		<div><input id="sort_index" type="button" value="按序号排"/><input id="sort_random" type="button" value="按随机值排"/></div>
		<script>
		    window.console = window.console || { log: function() {} };
			
			function absolutePoint(element) {
				var result = [element.offsetLeft, element.offsetTop];
				element = element.offsetParent;
				while (element) {
					result[0] += element.offsetLeft;
					result[1] += element.offsetTop;
					element = element.offsetParent;
				}
				return result;
			}

			/**
			 * 设计：王集鹄
			 * 日期：2010年12月17日
			 * 欢迎关注：http://t.sina.com.cn/zswang
			 */
			function ListView(options){
				options = options || {};
				
				var self = this,
					$C = function(tagName) { return document.createElement(tagName); }, // 创建节点
					p,
					height,
					item_height, // 项高
					view_count, // 可见项条数
					parent = options.parent || document.body, // 容器
					height, // 面板历史高度
					div_panel = $C("div"), 
					div_scroll = $C("div"),
					div_items = $C("div"),
					div_items_list = [$C("div")],
					freed = [div_panel, div_scroll, div_items]; // 可释放的对象
					
				div_panel.className = "panel";
				parent.appendChild(div_panel);
				
				div_items.className = "items";
				document.body.appendChild(div_items);
				
				div_scroll.className = "scroll";
				div_panel.appendChild(div_scroll);
				
				div_panel.onscroll = function() {
					doChange();
				}
				div_panel.onresize = function() {
					doChange();
				}
				
				div_items_list[0].className = "item";
				div_items.appendChild(div_items_list[0]);
				
				div_scroll.style.width = div_items_list[0].clientWidth + "px";
				item_height = div_items_list[0].clientHeight;
				
				p = absolutePoint(div_panel);
				with(div_items.style) {
					left = p[0] + "px";
					top = p[1] + "px";
					width = div_panel.clientWidth;
					height = div_panel.clientHeight;
				}
				/**
				 * 界面改变
				 */ 
				function doChange() {
					if (!item_height) return;
					var i, div;
					if (height != div_panel.clientHeight) {
						height = div_panel.clientHeight;
						view_count = parseInt(height / item_height);
						for (i = div_items_list.length; i < view_count; i++) {
							div = $C("div");
							div.className = "item" + (i % 2 == 0 ? "" : " odd");
							div_items.appendChild(div);
							div_items_list.push(div);
						}
						for (i = 0; i < div_items_list.length; i++) {
							div_items_list[i].style.display = i < view_count ? "" : "none";
						}
						div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px";
						console.log(["view_count", view_count]);
					}
					div_items.scrollLeft = div_panel.scrollLeft;
					if (!options.ondrawitem) return;
					i = Math.min(view_count, div_items_list.length);
					while(i--) {
						// 重新绘制
						options.ondrawitem(i + div_panel.scrollTop, div_items_list[i]);
					}
				}
				
				doChange();
				this.doChange = doChange;
				/**
				 * 释放Dom对象
				 */
				this.dispose = function() {
					var i = freed.length;
					while(i--) {
						freed[i].parentNode.removeChild(freed[i]);
					}
					i = freed.length;
					while(i--) {
						div_items_list[i].parentNode.removeChild(div_items_list[i]);
					}
				}
			}
			function format(template, json) {
				if (!json) return template;
				return template && template.replace(/\$\{(.+?)\}/g, function() {
					return json[arguments[1]];
				})
			}
			window.onload = function() {
				var i = 100000, data = new Array(i);
				while(i--) {
					data[i] = { index: i, random: Math.random(), key: (+new Date()).toString(36) };
				}
				var listview = new ListView({
					count: data.length,
					ondrawitem: function(i, div) {
						div.innerHTML = format("<em>${index}</em>&nbsp;<span class=\"red\">${random}</span>&nbsp;<span class=\"green\">${key}</span>", data[i]);
					}
				});
				
				var asc = 1;
				document.getElementById("sort_index").onclick = function() {
					asc = -asc;
					data.sort(function(a, b) {
						return (a.index - b.index) * asc;
					});
					listview.doChange();
				} 
				document.getElementById("sort_random").onclick = function() {
					asc = -asc;
					data.sort(function(a, b) {
						return (a.random - b.random) * asc;
					});
					listview.doChange();
				} 
			};
		</script>
	</body>
</html>
